<template>

    <div class="content">
       <h1 class="title">
           <slot name="title"></slot>
           <hr/>
       </h1>
      <el-table :data="shopsList">
        <el-table-column label="菜品" prop="name">

        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img style="width: 45px;height: 45px;" :src="scope.row.pic">
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price">

        </el-table-column>
        <el-table-column label="配料表" prop="ingredientList">

        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-select style="width: 60px" v-model="num"   >
              <el-option value="1">1份</el-option>
              <el-option value="2">2份</el-option>
              <el-option value="3">3份</el-option>
              <el-option value="4">4份</el-option>
              <el-option value="5">5份</el-option>
              <el-option value="6">6份</el-option>
              <el-option value="7">7份</el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="goBuy(scope.row.id)">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
import {mapGetters} from "vuex";
import {mixin} from "../mixins";
import {generateAnOrder} from "../api/order";
export default {
    name: 'album-content',
    mixins: [mixin],
    props:[
        'shopsList'
    ],
  data(){
      return {
        //商品数量
        num:1,
        zqg:[],
        login:"",
      }
  },
  mounted() {
    // if (this.shopsList == null){
    //  this.zqg =  JSON.parse(window.sessionStorage.getItem('shop'));
    // }
    // console.log(this.shopsList)
  },
  created() {
    this.login = JSON.parse(window.sessionStorage.getItem('loginIn'));
  },
  methods:{
      //购买接口
    goBuy(id) {
      if (this.login == true) {
        generateAnOrder(this.num, id).then(res => {
          if (res.data.code == 200) {
            this.$message.success("购买成功")
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(error => {
          this.$message.error("系统结算业务维护中！！！")
        })
      }else {
        this.$message.error("未登录")
      }
      },
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/css/album-content.scss';
</style>
